import React from 'react';
import { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';
import { useDeviceDetect, DeviceInfo } from '../../hooks/useDeviceDetect';
import { useOrientation, Orientation } from '../../hooks/useOrientation';
import { useViewport, ViewportInfo } from '../../hooks/useViewport';

/**
 * 响应式Props注入接口
 */
export interface ResponsiveInjectedProps {
  breakpoint: Breakpoint;
  device: DeviceInfo;
  orientation: Orientation;
  viewport: ViewportInfo;
}

/**
 * withResponsive HOC
 * 为组件注入响应式相关的props
 *
 * @param Component - 要包装的组件
 * @returns 包装后的组件
 *
 * @example
 * interface MyComponentProps extends ResponsiveInjectedProps {
 *   title: string;
 * }
 *
 * const MyComponent: React.FC<MyComponentProps> = ({ breakpoint, device, title }) => {
 *   return (
 *     <div>
 *       <h1>{title}</h1>
 *       <p>Current breakpoint: {breakpoint}</p>
 *       <p>Is mobile: {device.isMobile ? 'Yes' : 'No'}</p>
 *     </div>
 *   );
 * };
 *
 * export default withResponsive(MyComponent);
 */
export function withResponsive<P extends ResponsiveInjectedProps>(
  Component: React.ComponentType<P>
) {
  const WrappedComponent: React.FC<Omit<P, keyof ResponsiveInjectedProps>> = (props) => {
    const breakpoint = useBreakpoint();
    const device = useDeviceDetect();
    const orientation = useOrientation();
    const viewport = useViewport();

    const responsiveProps: ResponsiveInjectedProps = {
      breakpoint,
      device,
      orientation,
      viewport
    };

    return <Component {...(props as P)} {...responsiveProps} />;
  };

  WrappedComponent.displayName = `withResponsive(${Component.displayName || Component.name || 'Component'})`;

  return WrappedComponent;
}
